import React from 'react';
import {
  LocaleProvider as LocaleProvider_,
  ConfigProvider as ConfigProvider_,
  Button as Button_,
  Menu as Menu_,
  Dropdown as Dropdown_,
} from 'antd';
// import { ButtonProps } from 'antd/es/button';
import zh_CN from 'antd/es/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

/**
 * 设置为中文简体
 */
export const LocaleProvider: React.SFC = props => <LocaleProvider_ locale={zh_CN} {...props} />;

/**
 * 全局化配置
 */
export class ConfigProvider extends React.Component<React.HTMLProps<HTMLDivElement>> {
  box?: HTMLDivElement;

  render() {
    return (
      <ConfigProvider_ getPopupContainer={() => this.box!}>
        <div ref={box => (this.box = box!)} {...this.props} />
      </ConfigProvider_>
    );
  }
}

/**
 * 按钮
 */
export const Button: React.SFC<any> = props => <Button_ type="primary" {...props} />;

interface IDropdownButtonData extends React.HTMLProps<HTMLAnchorElement> {
  text: string;
}

interface IDropdownButtonProps {
  data: IDropdownButtonData[];
  [key: string]: any;
}

/**
 * 按钮列表，常用于批量操作
 */
export const DropdownButton: React.SFC<IDropdownButtonProps> = ({ data, children, ...props }) => {
  const menu = (
    <Menu_>
      {data.map(({ text, ...i }, k) => (
        <Menu_.Item key={k}>
          <a {...i}>{text}</a>
        </Menu_.Item>
      ))}
    </Menu_>
  );
  return (
    <Dropdown_ overlay={menu} placement="bottomRight" {...props}>
      <Button type="default">{children}</Button>
    </Dropdown_>
  );
};

// 统一导出 - 根据需求自行添加
export * from './data_show'; // 数据展示
export * from './input'; // 输入框
export * from './select'; // 选择框
export * from './form'; // 表单
